/* eslint-disable react/no-danger */
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useRef } from 'react';
import { Collapse } from 'antd';
import hljs from 'highlight.js';
import MarkdownIt from 'markdown-it';
import fiber from '@/assets/images/advanceReact/fiber.png';
import fiberWork from '@/assets/images/advanceReact/fiber_work.png';

import 'highlight.js/styles/atom-one-light.css';
import './index.less';

const { Panel } = Collapse;
const mdParser = MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  highlight(str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (error) {
        console.log(error);
      }
    }
    return ''; // 使用额外的默认转义
  },
});

export default function Fiber() {
  return (
    <div className="advance-react-wrapper">
      <Collapse defaultActiveKey={['2', '3']}>
        <Panel header="1、前言" key="1">
          <p style={{ textIndent: '2em' }}>
            React的Stack
            Reconciler也渐渐在体验方面显出疲态，在16.x版本中将其最为核心的Diff算法整个重写
            使其以“Fiber Reconciler”的全新面貌示人。
          </p>
          <p>
            <br></br>
            <h4>js单线程的机制</h4>
            <ul>
              <li>
                当事件被触发时，对应的任务不会立刻被执行
                而是由事件线程把它添加到任务队列的末尾，等待JavaScript的同步代码执行完毕后
                在空闲的时间里执行出队。
              </li>
              <li>
                如果渲染线程和JavaScript线程同时在工作 那么渲染结果必然是难以预测的
                JavaScript线程和渲染线程必须是互斥的: 当其中一个线程执行时，另一个线程只能挂起等待。
              </li>
            </ul>
            <h4>影响</h4>
            <p style={{ textIndent: '2em' }}>
              渲染层面的更新长时间地等待，界面长时间不更新，带给用户的体验就是所谓的“卡顿”
            </p>
            <p style={{ textIndent: '2em' }}>
              事件线程也在等待JavaScript，这就导致你触发的事件也将是难以被响应的
            </p>
          </p>
        </Panel>
        <Panel header="2、原因" key="2">
          <p style={{ textIndent: '2em' }}>
            Stack Reconciler
            是一个同步的递归过程（取决于树的dfs的过程），不可以被打断。当dom及其庞大、复杂时，Stack
            Reconciler需要的调和时间会很长，这就意味着JavaScript线程将长时间地霸占主线程
            进而导致我们上文中所描述的渲染卡顿/卡死、交互长时间无响应等问题。
          </p>
        </Panel>
        <Panel header="3、Fiber" key="3">
          <ul>
            <li>从架构角度来看，Fiber是对React核心算法的重写</li>
            <li>从编码角度来看，Fiber 是React内部所定义的一种数据结构</li>
            <li>从工作流的角度来看，Fiber 节点保存了组件需要更新的状态和副作用</li>
          </ul>
          <p style={{ textIndent: '2em' }}>
            Fiber应用目的是实现增量渲染，实现增量渲染的目的，是为了实现任务的<b>可中断、可恢复</b>
            ，并给不同的任务赋予不同的
            <b>优先级</b>，最终达成更加顺滑的用户体验
          </p>
          <img src={fiber} alt="" height="400px" style={{ marginRight: 20 }} />
          <img src={fiberWork} alt="" height="400px" />
        </Panel>
      </Collapse>
    </div>
  );
}
